<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>喜马拉雅</title>
    <link rel="stylesheet" href="../8-作业7-29（动画-day01）/作业1-喜马拉雅/css/font.css">
    <link rel="stylesheet" href="../8-作业7-29（动画-day01）/作业1-喜马拉雅/css/index.css">
</head>

<body>
    <header class="x-header">
        <div class="container">
            <a href="#" class="x-header-logo">喜马拉雅</a>
            <nav class="x-header-nav">
                <a href="#" class="nav-item">发现</a>
                <a href="#" class="nav-item">频道
                    <span class="iconfont icon-down"></span>
                    <div class="channel-layer">
                        所有频道<br>
                        所有频道<br>
                        所有频道<br>
                        所有频道<br>
                    </div>
                </a>
                <a href="#" class="nav-item">电台</a>
            </nav>
            <div class="x-header-search">
                <form action="#">
                    <input type="text" placeholder="专辑/声音/主播" />
                    <a href="#" class="btn">
                        <span class="iconfont icon-search"></span>
                    </a>
                </form>
            </div>
            <div class="x-header-icons">
                <a href="#" class="icons-item">
                    <span class="iconfont icon-cloud-upload"></span>
                    <span class="tit">上传</span>
                </a>
                <a href="#" class="icons-item">
                    <span class="iconfont icon-pic-left"></span>
                    <span class="tit">创作中心</span>
                </a>
                <a href="#" class="icons-item">
                    <span class="iconfont icon-sound"></span>
                    <span class="tit">有声出版</span>
                </a>
                <a href="#" class="icons-item">
                    <span class="iconfont icon-desktop"></span>
                    <span class="tit">客户端</span>
                </a>
                <a href="#" class="icons-item">
                    <img src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/avatar.png" alt="" />
                </a>
            </div>
        </div>
    </header>
    <main class="x-main">
        <div class="container">
            <!-- banner -->
            <div class="banner">
                <ul class="banner-list">
                    <li class="banner-item left">
                        <a href="#">
                            <img src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/banner01.jpg" alt="" />
                        </a>
                    </li>
                    <li class="banner-item">
                        <a href="#">
                            <img src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/banner02.jpg" alt="" />
                        </a>
                    </li>
                    <li class="banner-item right">
                        <a href="#">
                            <img src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/banner03.jpg" alt="" />
                        </a>
                    </li>
                </ul>
            </div>
            <!-- category -->
            <nav class="category">
                <div class="category-top">
                    <a href="#" class="top-item">
                        <span class="iconfont icon-block top-item-icon"></span>
                        <span>频道</span>
                    </a>
                    <a href="#" class="top-item">
                        <span class="iconfont icon-appstore top-item-icon"></span>
                        <span>分类</span>
                    </a>
                    <a href="#" class="top-item">
                        <span class="iconfont icon-crown top-item-icon"></span>
                        <span>排行</span>
                    </a>
                </div>
                <div class="category-sub">
                    <div class="category-sub-item">
                        <a href="#" class="start">小说</a>
                        <a href="#">男频</a>
                        <a href="#">女频</a>
                    </div>
                    <div class="category-sub-item">
                        <a href="#" class="start">相声</a>
                        <a href="#">郭麒麟</a>
                        <a href="#">岳云鹏</a>
                    </div>
                    <div class="category-sub-item">
                        <a href="#" class="start">音乐</a>
                        <a href="#">电音</a>
                        <a href="#">流行</a>
                    </div>
                    <div class="category-sub-item">
                        <a href="#" class="start">商业</a>
                        <a href="#">市场营销</a>
                        <a href="#">管理</a>
                    </div>
                    <div class="category-sub-item">
                        <a href="#" class="start">健康</a>
                        <a href="#">饮食</a>
                        <a href="#">科普</a>
                    </div>
                    <div class="category-sub-item">
                        <a href="#" class="start">科技</a>
                        <a href="#">互联</a>
                        <a href="#">无人驾驶</a>
                    </div>
                    <div class="category-sub-item">
                        <a href="#" class="start">英语</a>
                        <a href="#">听力</a>
                        <a href="#">实用</a>
                    </div>
                    <div class="category-sub-item">
                        <a href="#" class="start">头条</a>
                        <a href="#">实时快讯</a>
                        <a href="#">民生</a>
                    </div>
                </div>
            </nav>
            <!-- layout -->
            <section class="layout">
                <!-- 主体内容  -->
                <div class="layout-main">
                    <div class="panel">
                        <div class="panel-head">
                            <h3 class="panel-head-tit">猜你喜欢</h3>
                            <a class="panel-head-toggle" href="#">
                                <span class="iconfont icon-sync"></span>
                                <span>换一批</span>
                            </a>
                        </div>
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="album-item">
                                        <div class="album-item-box">
                                            <img class="img" src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/img01.jpg"
                                                alt="" />
                                        </div>
                                        <p class="album-item-tit">奇妙三字经 | 诵读吟唱经典磨耳朵 | 宝宝巴士国学</p>
                                        <p class="album-item-aut">宝宝巴士</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="album-item">
                                        <div class="album-item-box">
                                            <img class="img" src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/img02.jpg"
                                                alt="" />
                                        </div>
                                        <p class="album-item-tit">我的世界 小绿的日记</p>
                                        <p class="album-item-aut">狙击手小鲁</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="album-item">
                                        <div class="album-item-box">
                                            <img class="img" src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/img03.jpg"
                                                alt="" />
                                        </div>
                                        <p class="album-item-tit">呼呼收音机：传统节日故事</p>
                                        <p class="album-item-aut">呼呼收音机</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="album-item">
                                        <div class="album-item-box">
                                            <img class="img" src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/img04.jpg"
                                                alt="" />
                                        </div>
                                        <p class="album-item-tit">小学生必背古诗词75+80首</p>
                                        <p class="album-item-aut">同优文化</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="album-item">
                                        <div class="album-item-box">
                                            <img class="img" src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/img05.jpg"
                                                alt="" />
                                        </div>
                                        <p class="album-item-tit">朕|起点爆款历史文｜架空权谋&逆袭成帝|VIP免费有声小说</p>
                                        <p class="album-item-aut">伍壹先生</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 侧边栏 -->
                <div class="layout-aside">
                    <div class="card">
                        <div class="card-head">
                            <img class="avatar" src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/avatar.png" alt="" />
                            <p class="text">登录一下，让我了解你</p>
                        </div>
                        <div class="card-info">
                            <a href="#" class="login">登 录</a>
                        </div>
                    </div>
                    <div class="download">
                        <div class="dl">
                            <p class="dl-tit">下载客户端</p>
                            <a href="#" class="dl-btn">iPhone</a>
                            <a href="#" class="dl-btn">Android</a>
                        </div>
                        <img src="../8-作业7-29（动画-day01）/作业1-喜马拉雅/assets/zrrd.png" alt="">
                    </div>
                </div>
            </section>
        </div>
        </header>
</body>

</html>